<template>
    <h1>echarts图表使用</h1>
    <div style="height:400px;">
        <barChart :xlist="vdata.xlist" :barData="vdata.bardata"/>
        <button @click="changeData">改变数据</button>
    </div>
</template>

<script setup>
import barChart from '@/publicChart/barchart.vue'
import {reactive} from 'vue'
const vdata = reactive({
    xlist:['Mon', 'Tues', 'Wens', 'Thurs', 'Fri', 'Sat', 'Sun'],
    bardata:{
        data1 : [120, 232, 301, 264, 90, 340, 110],
        data2 : [120, 242, 211, 234, 220, 340, 210],
        data3 : [220, 102, 301, 234, 190, 130, 120],
        data4 : [220, 472, 231, 134, 190, 230, 120],
        data5 : [120, 302, 181, 134, 210, 220, 180],
    }
})

// changeData();
function changeData(){
    setTimeout(() => {
        vdata.xlist = ['Monday', 'Tuesday', 'Wensday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
        vdata.bardata.data1 = [140, 232, 101, 264, 90, 340, 250];
        vdata.bardata.data2 = [120, 282, 111, 234, 220, 340, 310];
        vdata.bardata.data3 = [320, 132, 201, 334, 190, 130, 220];
        vdata.bardata.data4 = [220, 402, 231, 134, 190, 230, 120];
        vdata.bardata.data5 = [220, 302, 181, 234, 210, 290, 150];
    },2000)
}
</script>

<style lang="scss" scoped>

</style>